<template>
  <div>
    <!-- 头部 -->
    <p-head></p-head>

    <!-- 横通 -->
    <div class="tips">
      <img src="../../img/news.jpg" alt="" />
      <div class="tips_title">
        <h1>新闻</h1>
        <h2>NEWS</h2>
      </div>
    </div>

    <!-- 内容 -->
    <div class="newdetail">
      <h3 class="h1">{{ newdata.title }}</h3>
      <p class="p1">
        <span class="iconfont yf-icon-fabu"></span>发布时间：{{
          newdata.create_time
        }}<span class="iconfont yf-icon-yanjing"></span> 阅读次数：{{
          newdata.reading
        }}次
      </p>
      <div class="nd_content">

        <!-- <p class="p2">原标题：{{newdata.yuantitle?newdata.yuantitle:'无'}}</p>
        <p class="p3">来源：{{newdata.source?newdata.source:'无'}}</p> -->
        <div class="contents">
          <div class="meeting-detail-intro" v-html="newdata.content"></div>
        </div>
        <template v-if="prev.id">
          <h3 class="last">
            上一篇: <span @click="prevdata(prev.id)">{{ prev.title }}</span>
          </h3>
        </template>
        <template v-if="next.id">
          <h4 class="next">
            下一篇：<span @click="nextdata(next.id)">{{ next.title }}</span>
          </h4>
        </template>
      </div>
    </div>

    <!-- 底部 -->
    <p-foot></p-foot>
  </div>
</template>
<script>
import {} from "../../http/api";
import { get } from "@/http/request";

export default {
  name: "MeetingDetailIntro",
  components: {},
  props: [],
  data() {
    return {
      newdata: [],
      next: [],
      prev: [],
    };
  },
  methods: {
    /***获取新闻详情数据**/
    getdatalist(new_id) {
      get("/api/home/getArtInfo", { id: new_id })
        .then((res) => {
          if (res.data.code == 200) {
            this.newdata = res.data.food;
            this.prev = res.data.food.prev;
            this.next = res.data.food.next;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    nextdata(newid) {
      this.getdatalist(newid);
    },
    prevdata(newid) {
      this.getdatalist(newid);
    },
  },
  mounted() {
    let new_id = this.$router.app._route.query.newid;
    this.getdatalist(new_id);
  },
  computed: {},
  watch: {},
};
</script>
<style lang="less">
@import "../../less/index.less";
@import "../../assets/css/reset.css";
.meeting-detail-intro {
  ::v-deep {
    img {
      max-width: 100%;
    }
  }
}
.meeting-detail-intro img{
    max-width: 100% !important;
    height: auto !important;
}

.newdetail {
  width: 70%;
  // background-color: pink;
  min-height: 800px;
  margin: 0 auto;
  margin-top: 40px;
}

.newdetail .h1 {
  font: 24px/68px "微软雅黑";
  color: #333333;
  text-align: center;
}

.newdetail .p1 {
  font: 14px "微软雅黑";
  color: #666666;
  text-align: center;
  padding-bottom: 36px;
  border-bottom: 1px solid #f4f6fa;
}

.newdetail .p1 span {
  font: 12px "微软雅黑";
  color: #666666;
  padding-right: 12px;
  padding-left: 12px;
}

.nd_content .p2,
.p3 {
  font: 14px/28px "微软雅黑";
  color: #666666;
  width: 100%;
}

.nd_content .p2 {
  padding-top: 16px;
}

.nd_content .contents {
  padding: 20px 0 70px;
  //background: blue;
  border-bottom: 1px solid #f4f6fa;
}

.nd_content .last,
.next {
  height: 40px;
  font: 18px "微软雅黑";
  color: #333333;
  cursor: pointer;
  line-height: 40px;
  white-space: nowrap;
  width: 260px;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 20px;
}

.nd_content .next {
  margin-bottom: 52px;
}
@media screen and (max-width: 600px) {
  .newdetail .h1 {
    width: 80%;
    line-height: 30px;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .newdetail {
    width: 90%;
  }
}
</style>